<template>
	<view style="padding : 30rpx;">
		
		<view class="userBox">
			<image 	class="headImage"
					:src="user.avatar"
					mode="widthFix"
					style="width: 25%;">
			</image>
			
			<view class="userDetail">
				<text>
					昵称：{{user.name}}
				</text>
				
				<text>
					用户名：{{user.username}}
				</text>
				
			</view>
		</view>
		
		<view class="function">
			<view class="function-item" @click="toMyLike">
			    <image 	src="/static/tab-Icons/like.png"
						mode="widthFix"
						style="width: 70%;">
				</image>
				
			    <text class="funcLabel">点赞</text>
			</view>
			
			<view class="function-item" @click="toMyComment">
				<image  src="/static/tab-Icons/comment.png"
						mode="widthFix"
						style="width: 70%;">
				</image>
				
			    <text class="funcLabel">评论</text>
			</view>
			
			<view class="function-item" @click="toMyMessage" style="margin-top: 5.5px;">
				<image  src="/static/tab-Icons/message.png"
						mode="widthFix"
						style="width: 46%;">
				</image>
				
			    <text class="funcLabel" style="margin-top: 13px;">通知</text>
			</view>
			
			
			
			<view class="function-item" @click="toFriends">
			    <image 	src="/static/tab-Icons/friends.png"
			    		mode="widthFix"
			    		style="width: 70%;">
			    </image>
				
			    <text class="funcLabel">好友</text>
			</view>
		</view>
		
		<view class="service">
			<navigator url="/pages/myInfo/myInfo" 
					   style="padding: 15rpx; border-bottom: 2rpx solid #eee;">
					   
				<uni-icons type="person" size="18"></uni-icons>
				<text style="margin-left: 10rpx;">个人信息</text>
				<uni-icons type="right" color="#999" style="float: right;"></uni-icons>
			</navigator>
			
			<navigator url="/pages/aboutUs/aboutUs" 
			           style="padding: 15rpx; border-bottom: 2rpx solid #eee;">
				<uni-icons type="help" size="18"></uni-icons>
					<text style="margin-left: 10rpx;">关于我们</text>
				<uni-icons type="right" color="#999" style="float: right;"></uni-icons>
			</navigator>
		
			<navigator url="/pages/agreement/agreement" 
			           style="padding: 15rpx; border-bottom: 2rpx solid #eee;">
				<uni-icons type="info" size="18"></uni-icons>
					<text style="margin-left: 10rpx;">用户协议</text>
				<uni-icons type="right" color="#999" style="float: right;"></uni-icons>
			</navigator>
			
			<view style="padding: 15rpx; border-bottom: 2rpx solid #eee;" 
				  @click="logout()">
				<uni-icons type="undo" size="18"></uni-icons>
					<text style="margin-left: 10rpx;">退出登录</text>
				<uni-icons type="right" color="#999" style="float: right;"></uni-icons>
			</view>

		</view>
		
	</view>
</template>

<script>
	import isLogin from  '@/isLogin';
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
			};
		},
		
		methods: {
			toMyLike(){
				uni.navigateTo({
					url:'/pages/myLike/myLike'
				})
			},
			
			toMyComment(){
				uni.navigateTo({
					url:'/pages/myComment/myComment'
				})
			},
			
			toMyMessage(){
				console.log("前往消息页面")
				uni.navigateTo({
					url:'/pages/myMessage/myMessage'
				})
			},
			
			toFriends(){
				uni.navigateTo({
					url:'/pages/friends/friends'
				})
			},
			
			
			logout() {
				isLogin.ifLogin = false;
				isLogin.ifChecked = false;
				
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.userBox {
		display: flex;
		background-color: #fff;
		padding: 80rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
	}
	
	.userDetail {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.headImage {
		margin-right: 15%;
		max-width: 50px;
		max-height: 60px;
	}
	
	.function {
		display: flex;
		background-color: #fff;
		padding: 50rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 5%;
	}
	
	.function-item {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  width: 33%;
	}
	
	.funcLabel {
	  margin-top: 5px;
	  font-size: 14px;
	  color: #666666;
	}
	
	.service {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .1);
		margin-bottom: 3%;
		flex-direction: column;
	}
	
</style>
